<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>新增</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<include file="common/tag"/>
	</head>
	<link rel="stylesheet" href="/static/plugin/ace/css/chosen.css" />
	<script src="/static/plugin/ace/js/chosen.jquery.min.js"></script>
	<script src="/static/plugin/ace/js/jquery.autosize.min.js"></script>
	<script src="/static/plugin/ace/js/jquery.inputlimiter.1.3.1.min.js"></script>

	<link rel="stylesheet" type="text/css" href="/static/plugin/webuploader/webuploader.css">
	<link rel="stylesheet" type="text/css" href="/static/plugin/webuploader/style.css">
	<script type="text/javascript" src="/static/plugin/webuploader/webuploader.js"></script>
	<style>
		body{
			background-color:#fff
		}
		.yui_right{
			float: right;
			margin-bottom: 10px;
		}
	</style>
	<body >
	<div>
		<div class="widget-main">
			<input type="hidden" name="__token__" value="{$Request.token}" />

			<input type="hidden" name="label" value="{$label}"/>

			<div>
				<label >相片</label>
				<div id="uploader-demo">
					<!--用来存放item-->
					<div id="fileList" class="uploader-list"></div>
					<div id="filePicker">选择图片</div>
				</div>
			</div>

			<br>

			<div>
				<label >标注</label>
				<input type="text" name="tag" placeholder="标注" class="form-control" />
			</div>

			<br>

			<div>
				<label >状态</label>
				<select class="form-control" name="status">
					<option value="0">关闭</option>
					<option value="1" selected>开启</option>
				</select>
			</div>

			<br>

			<div>
				<label >备注</label>
				<textarea class="autosize-transition form-control" name="description"></textarea>
			</div>

			<br>

			<button class="btn btn-primary yui_right" id="yui_save">
				<i class="icon-plus align-top bigger-125"></i>
				保存
			</button>
		</div>
	</div>

	</body>
	<script>
		var uploader;

		$(function () {
            $(".chosen-select").chosen();
            $('textarea[class*=autosize]').autosize({append: "\n"});
            $('textarea.limited').inputlimiter({
                remText: '%n character%s remaining...',
                limitText: 'max allowed : %n.'
            });

            initWebUploader();

            $("#yui_save").on('click' , function(){
                var form= new FormData();
                var __token__=$("input[name='__token__']").val();
                var label=$("input[name='label']").val();
                var tag=$("input[name='tag']").val();
                var status=$("select[name='status']").val();
                var description=$("textarea[name='description']").val();
                form.append('__token__',__token__);
                form.append('tag',tag);
                form.append('label',label);
                form.append('status',status);
                form.append('description',description);
                var images=uploader.getFiles();
                for (var i=0;i<images.length;i++){
                    form.append('image['+i+']',images[i]['source']['source']);//file
				}
                var pro_layer;
                $.ajax({
                    url : '/index.php/admin/album/album_add',
                    type : 'POST',
                    dataType:"json",
                    data : form,
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    beforeSend:function(){
                        pro_layer =layer.open({
                            title: '',
                            area: ['150px','50px'],
                            btn:[],
                            closeBtn: 0,
                            content: '<div style="margin-top: -5px" ><i class="icon-spinner icon-spin orange bigger-125"></i>数据传输中......</div>'
                        });
                        layer.style(pro_layer, {
                            "min-width": '150px',
                            "text-align": 'center'
                        });
                    },
                    success : function(data) {
                        layer.close(pro_layer);
                        if (data['code']==1){
                            layer.open({
                                title: '提示',
                                content: '操作成功'
                                ,yes: function(index, layero){
                                    window.parent.location.reload();
                                },cancel: function(){
                                    window.parent.location.reload();
                                }
                            });
                        }else{
                            layer.msg(data['text']);
                        }
                    },
                    error : function(responseStr) {
                        console.log(responseStr);
                        layer.msg("操作出错",{time:1000});
                    }
                });
            });

        });

		/*
		* 初始化上传插件
		* */
		function initWebUploader() {
            var $ = jQuery,
                $list = $('#fileList'),
                // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

                // 缩略图大小
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio;
            // 初始化Web Uploader
           uploader = WebUploader.create({
                swf: '/static/plugin/webuploader/js/Uploader.swf',
                server: '',
                pick: '#filePicker',
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.append( $li );
                // 创建缩略图
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
        }

	</script>

</html>
